<template>
  <ContentBox :has-corner="true" class="community-info-board">
    <ContentBoxTitle title="小区信息板" />
    <div class="community-info-board__content">
      <div class="community-info-board__content__box">
        <infinity-scroll :animate-key="'InfoBoard'">
          <slot slot="tmp">
            <div>
              <div
                v-for="(item, index) of list"
                :key="index"
                class="community-info-board__content__item"
              >{{ item }}</div>
            </div>
          </slot>
        </infinity-scroll>
      </div>
    </div>
  </ContentBox>
</template>

<script>
import ContentBox from '@/components/ContentBox'
import ContentBoxTitle from '@/components/ContentBoxTitle'
import infinityScroll from '@/components/infinityScroll'
export default {
  name: 'CommunityInfoBoard',
  components: {
    ContentBox,
    ContentBoxTitle,
    infinityScroll
  },
  props: {
    list: {
      type: Array,
      default: () => []
    }
  },
  data () {
    return {
      activeIndex: 0,
      containerHeight: 0,
      boxHeight: 0,
      intnum: undefined
    }
  },
  methods: {

  }
}
</script>

<style lang="scss">
.community-info-board {
  width: $base * 360px;
  height: $base * 230px;

  .community-info-board__content {
    color: #fff;
    font-size: $base * 14px;
    padding: $base * 16px $base * 19px $base * 16px $base * 19px;
    // overflow: auto;
    height: calc(100% - 90px); // TODO: $base*45px
    overflow: hidden;
    .community-info-board__content__box {
      width: 100%;
      height: 100%;
    }
    .community-info-board__content__item {
      // overflow: hidden;
      // text-overflow: ellipsis;
      // white-space: nowrap;
      line-height: $base * 20px;
      text-align: left;

      & + .community-info-board__content__item {
        margin-top: $base * 12px;
      }
    }
  }

  .content-box-title__content {
    width: $base * 300px;
  }
}
</style>